<template>
  <div class="main-container">
    <header>
      <top-header :name="name" />
    </header>
    <aside>
      <router-link v-for="d in filterNavList" :key="d.path" :to="d.path">
        {{ d.label }}
      </router-link>
    </aside>
    <main>
      <router-view />
    </main>
  </div>
</template>
<script>
import TopHeader from "./../components/TopHeader.vue";
import { mapActions } from "vuex";
export default {
  components: {
    TopHeader,
  },
  created() {
    //请求接口
    this.axios.get("/who").then((data) => {
      //判断是否登录成功
      if (!data.code) {
        this.name = data.data.name;
        // this.$store.commit('setRole',data.data.role)
        // this.$store.commit('setPermissions',data.data.permissions)
        // this.$store.dispatch('setUser',data.data)
        this.setUser(data.data);
      }
    });
    this.getStatus();
    this.getequipStatus()
    this.getCategory();
  },
  data() {
    //路由的数组列表
    return {
      navList: [
        {
          label: "系统概览",
          path: "/main/overview",
          permission: "overview",
        },
        {
          label: "设备登记",
          path: "/main/register/list",
          permission: "register",
        },
        {
          label: "数据管理",
          path: "/main/management/list",
          permission: "management",
        },
        {
          label: "数据字典",
          path: "/main/dictionary",
          permission: "dictionary",
        },
      ],
      name: "",
    };
  },
  computed: {
    //有权限的栏目
    filterNavList() {
      return this.navList.filter((i) => {
        return this.$store.state.permission.includes(i.permission);
      });
    },
  },
  methods: {
    // setUser(user){
    //   this.$store.dispatch('setUser',user)
    // },
    ...mapActions(["setUser"]),
    getStatus() {
      this.axios.get("/status-list?type=pre").then((data) => {
        if (!data.code) {
          // 通过$stroe的commit调用mutations,第一个参数是方法的名称，第二个参数是传递过去的数据
          this.$store.commit("setStatusList", data.data);
        }
      });
    },
    getequipStatus() {
      this.axios.get("/status-list?type=equip").then((data) => {
        if (!data.code) {
          // 通过$stroe的commit调用mutations,第一个参数是方法的名称，第二个参数是传递过去的数据
          this.$store.commit("setEquipStatusList", data.data);
        }
      });
    },
    getCategory() {
      this.axios.get("/category-list?type=pre").then((data) => {
        if (!data.code) {
          this.$store.commit("setCategoryList", data.data);
        }
      });
    },
  },
};
</script>
<style lang="sass" scoped>
.main-container
  & > *
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
  header
    bottom: auto
    height: 60px
    background: #0079c4
  aside
    top: 60px
    width: 190px
    right: auto
    background: #2c405a
    padding: 15px 10px
    a
      display: block
      line-height: 42px
      padding: 0 15px
      border-radius: 4px
      color: #fff
      transition: .3s
      font-size: 16px
      // 设置高亮
      &.router-link-active
        background: #3f536e
  main
    top: 60px
    left: 190px
    overflow: auto
</style>
